<template>
  <div class="product-info">
    <div class="categories">
      <div v-for="category in categories.list"
           :key="category.id"
           :class="{'category':true, 'category-selected':category.categoryId===categories.selectedId}"
           @click="changeCategory(category.categoryId)">
        {{ category.name }}
      </div>
    </div>
    <div class="product-list">
      <div v-for="product in products" :key="product.id" class="product">
        <img class="product-image" :src="product.imgUrl" alt="">
        <div class="intro">
          <p class="name">{{ product.name }}</p>
          <p class="month-sales">月售{{ product.monthSales }}件</p>
          <p class="price">
            <span class="discount-price">
              <em class="price-unit">￥</em>
              <em class="price-number">{{ product.discountPrice }}</em>
            </span>
            <span class="selling-price">
              ¥{{ product.sellingPrice }}
            </span>
          </p>
          <div class="product-count">
            <span class="minus" @click="changeCount(shopId,product.id,product,-1)">-</span>
            <span data-test="count"></span>
            {{ cartList?.[shopId]?.products?.[product.id]?.count || 0 }}
            <span
              class="plus"
              @click="changeCount(shopId,product.id,product,1)">+</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import productService from '@/api/service/productService'
import { useCartList } from '@/views/Shop/useCartList'

const useCategories = () => {
  const categories = reactive({
    selectedId: 0,
    list: [
      {
        categoryId: 0,
        name: '全部商品'
      },
      {
        categoryId: 1,
        name: '秒杀'
      },
      {
        categoryId: 2,
        name: '新鲜水果'
      },
      {
        categoryId: 3,
        name: '休闲食品'
      },
      {
        categoryId: 4,
        name: '时令蔬菜'
      },
      {
        categoryId: 5,
        name: '肉蛋家禽'
      }
    ]
  })

  const changeCategory = (categoryId) => {
    categories.selectedId = categoryId
  }
  return {
    categories,
    changeCategory
  }
}

function useProducts (categories) {
  const products = ref([])
  const getProducts = async (categoryId) => {
    products.value = await productService.getProducts({ categoryId: categoryId })
  }
  watchEffect(() => {
    getProducts(categories.selectedId)
  })
  return products
}

export default {
  name: 'ShopContent',
  props: ['cartList'],
  setup (props) {
    const route = useRoute()
    const shopId = route.params.id
    const {
      categories,
      changeCategory
    } = useCategories()
    const products = useProducts(categories)
    const {
      changeCount
    } = useCartList(shopId, props.cartList)
    return {
      categories,
      changeCategory,
      products,
      changeCount,
      shopId
    }
  }
}
</script>

<style lang="scss" scoped>
.product-info {
  height: 5rem;
  width: .76rem;
  background-color: #F5F5F5;
  display: flex;
  flex-direction: row;

  .categories {
    margin-right: .16rem;

    .category {
      width: .76rem;
      height: .4rem;
      border-radius: .02rem;
      font-size: .14rem;
      color: #333333;
      text-align: center;
      line-height: .4rem;

      &-selected {
        background-color: #FFFFFF;
      }
    }
  }

  .product-list {

    .product {
      position: relative;
      display: flex;
      width: 2.83rem;
      border-bottom: 1px solid #F1F1F1;
      padding-bottom: .12rem;
      padding-top: .12rem;
      box-sizing: border-box;

      .product-image {
        height: .68rem;
        width: .68rem;
        margin-right: .16rem;
      }

      .intro {

        .name {
          font-size: .14rem;
          color: #333333;
          margin: 0 0;
        }

        .month-sales {
          font-size: .12rem;
          color: #333333;
          line-height: .16rem;
          margin: .06rem 0;
        }

        .price {
          .discount-price {
            color: #E93B3B;
            margin-right: .12rem;

            .price-unit {
              font-size: .1rem;
            }

            .price-number {
              line-height: .20rem;
              font-size: .14rem;
            }
          }

          .selling-price {
            font-size: .10rem;
            color: #999999;
            line-height: .20rem;
            text-decoration: line-through;
          }
        }
      }

      .product-count {
        position: absolute;
        right: .3rem;
        bottom: .14rem;
        font-size: .14rem;
        color: #333333;
        line-height: .16rem;

        .minus {
          width: .16rem;
          height: .16rem;
          border: .01rem solid black;
          border-radius: 50%;
          display: inline-block;
          line-height: .16rem;
          font-size: .15rem;
          text-align: center;
        }

        .plus {
          width: .18rem;
          height: .18rem;
          border: none;
          border-radius: 50%;
          background-color: #0091FF;
          color: #FFFFFF;
          display: inline-block;
          line-height: .16rem;
          font-size: .16rem;
          text-align: center;
        }
      }
    }
  }

}
</style>
